"use strict";
import * as React from 'react';
const { View, FlatList, TouchableOpacity, Image } = require('react-native');
const { connect } = require('react-redux');
const NavigationBar = require('react-native-navbar').default;
import { commonProps, commonStyles } from "../../assets/styles/common";
import Line from "../../component/Line";
import Colors from "../../assets/styles/Colors";
import MyText from "../../component/MyText";
import { SCREEN_WIDTH } from "../../constant";
import MyIcon from "../../component/icon";
import Request from "../../utils/Request";
const { Actions } = require("react-native-router-flux");
const { List } = require('antd-mobile');
class ProductManagerPage extends React.Component {
    constructor(props, context) {
        super(props);
        this.fresh = (type) => {
            if (type === 'category') {
                this.props.dispatch({
                    type: 'product/fetchCategoryList',
                });
            }
            else {
                if (this.props.product.categoryList.length > 0) {
                    this.fetchProductList({ store_cate_id: this.props.product.categoryList[this.state.selectedCategory].id });
                }
                else {
                    this.props.dispatch({
                        type: 'product/clear',
                    });
                }
            }
        };
        this.fetchProductList = (props) => {
            this.props.dispatch({
                type: 'product/fetchProductList',
                payload: Object.assign({}, props)
            });
        };
        this.loadMore = () => {
        };
        this.onCategoryPress = (params) => {
            if (this.state.selectedCategory === params.index)
                return;
            this.setState({ selectedCategory: params.index });
            this.props.dispatch({
                type: 'product/changeSelectedCategoryIndex',
                payload: { index: params.index }
            });
        };
        this.renderItem1 = (params) => {
            return (<TouchableOpacity onPress={this.onCategoryPress.bind(this, params)}>
                <View key={params.index} style={[commonStyles.centerVH, { paddingVertical: 20 }]}>
                    <MyText color={params.index === this.state.selectedCategory ? Colors.Active : Colors.BriefTitle}>{params.item.store_menu}</MyText>
                </View>
                <Line />
            </TouchableOpacity>);
        };
        this.renderNoData = (tip) => {
            return (<View style={[commonStyles.flex1, commonStyles.centerVH]}>
                <MyText>{tip}</MyText>
            </View>);
        };
        this.renderItem2 = (params) => (<TouchableOpacity onPress={Actions.addProduct.bind(this, { actionType: 'edit', editProduct: params.item, title: '编辑商品' })}>
            <View style={[commonStyles.flexRow, { padding: 10 }]}>

                <Image source={{ uri: Request.checkImageUrl(params.item.get_douct_info.preview) }} style={{
            width: (SCREEN_WIDTH * 0.8 - 5) / 3 - 20, height: (SCREEN_WIDTH * 0.8 - 5) / 3 - 20,
            backgroundColor: 'red'
        }}/>
                <View style={[commonStyles.flex1, commonStyles.flexColumn, {
                justifyContent: 'space-around',
                marginLeft: 10
            }]}>
                    <MyText>{params.item.get_douct_info.name}</MyText>
                    <MyText>{params.item.get_douct_info.spec}</MyText>
                    <View style={[commonStyles.flexRow, { justifyContent: 'space-between', alignItems: 'center' }]}>
                        <MyText style={{ color: Colors.Active, fontSize: 18 }}><MyText style={{ fontSize: 14 }}>¥</MyText>{Number(params.item.get_douct_info.price).toFixed(2)}
                        </MyText>
                        <MyText color={Colors.Extra} fontSize={12}>{`已售  0`}</MyText>
                    </View>
                </View>
            </View>
            <Line />
        </TouchableOpacity>);
        this.state = {
            selectedCategory: 0
        };
    }
    componentDidMount() {
    }
    render() {
        return (<View style={commonStyles.container}>
                <NavigationBar {...commonProps.navBar} title={{ title: this.props.title, tintColor: '#fff' }}/>

                <TouchableOpacity style={[commonStyles.flexRow, commonStyles.centerVH, {
                paddingVertical: 5,
                backgroundColor: Colors.White
            }]} onPress={Actions.addProduct}>
                    <MyIcon name={'icon-icon19'} color={Colors.Primary} size={34}/>
                    <MyText style={{ marginLeft: 10 }}>添加商品</MyText>
                </TouchableOpacity>

                <View style={[commonStyles.flex1, commonStyles.flexRow, { marginTop: 10 }]}>
                    <View style={{ display: 'flex', flex: 0.2, marginRight: 10, backgroundColor: Colors.White }}>
                        <FlatList data={this.props.product.categoryList} extraData={this.state} style={{ flex: 1 }} onRefresh={this.fresh.bind(this, 'category')} refreshing={this.props.product.loading} renderItem={this.renderItem1} ListEmptyComponent={this.renderNoData.bind(this, '暂无分类')} keyExtractor={(item, index) => item.id}/>
                    </View>
                    <View style={{ display: 'flex', flex: 0.8, backgroundColor: Colors.White }}>
                        <FlatList data={this.props.product.productList} extraData={this.state} style={{ flex: 1 }} onRefresh={this.fresh.bind(this, 'product')} refreshing={this.props.product.loading} renderItem={this.renderItem2} onEndReached={this.loadMore} ListEmptyComponent={this.renderNoData.bind(this, '暂无商品')} keyExtractor={(item, index) => item.id}/>
                    </View>
                </View>

            </View>);
    }
}
export default connect(({ auth, product }) => ({ auth, product }))(ProductManagerPage);
